// 创建一个自定义指令对象
const clickOutsideDirective = {

    /* 指令作用的目标元素/组件挂载时... */
    mounted(el, binding, vnode) {
        console.log("指令作用的目标元素/组件已挂载");
        console.log("指令的值", binding.value);
        console.log("指令的参数", binding.arg);
        
        binding.arg = binding.arg || "click"

        // el.addEventListener(
        //     binding.arg,
        //     binding.value
        // )

        el.eventHandler = e => {
            if (!el.contains(e.target)) {
                binding.value.apply(null, e)
            }
        }

        document.addEventListener(
            binding.arg,
            el.eventHandler
        )

    },

    /* 指令作用的目标元素/组件卸载时... */
    unmounted(el, binding, vnode) {
        // 移出el身上的click事件
        // el.removeEventListener(
        //     binding.arg,
        //     binding.value
        // )

        document.removeEventListener(
            binding.arg,
            el.eventHandler
        )
        delete el.eventHandler

        console.log("事件已移除，内存泄漏风险已解除");
    }

};

// 创建一个指令实例，并导出
export default clickOutsideDirective